<template>
  <div class="container">
    <img :src="imgUrl" />
    <div class="w1300 flex-y flex-xc">
      <h1>{{ title }}</h1>
      <p v-html="detail"></p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  title: string
  detail: string
  bannerImg: string
  height?: string
}>()

const imgUrl = computed(
  () => new URL(`/src/assets/images/${props.bannerImg}`, import.meta.url).href,
)
</script>

<style scoped lang="scss">
.container {
  position: relative;
  height: 307px;

  img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
  }

  .w1300 {
    height: 307px;

    h1 {
      margin-bottom: 16px;
      font-size: 34px;
      font-weight: 600;
      color: #021429;
    }

    p {
      display: block;
      width: 900px;
      font-size: 18px;
      line-height: 25px;
      color: #040724;
    }
  }
}
</style>
